<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<title>登陆页面</title>
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		<style>

		</style>
	</head>

	<body>
		<div class="title">
			XXXXXXXXXX综合服务平台
		</div>
		<div class="login-panle">
			<div class="top">
				<ul>
					<li>
						<a href="javascript:;">注册</a>
					</li>
					<li class="active">
						<a href="javascript:;">账号登陆</a>
					</li>
				</ul>
			</div>
			<div class="mid">
				<ul>
					<li>
						<div class="register">
							<form action="#" method="post">
								<p>
									<input class="userName" type="text" placeholder="账号" />
									<input class="email" type="email" placeholder="邮箱" />
									<input class="password" type="password" placeholder="密码" />
									<input class="password" type="password" placeholder="再次输入密码" />
								</p>
								<p>
									<input type="submit" name="submit" class="btn-login" value="注册" />
								</p>
								<p>
									<a href="javascript:;">注册遇到问题？</a>
								</p>
							</form>
						</div>
					</li>
					<li class="active">
						<div class="login">
							<form action="#" method="post">
								<p>
									<input name="username" class="userName" type="text" placeholder="账号" />
									<input name="password" class="password" type="password" placeholder="密码" />
								</p>
								<p>
									<input id="btn-login" type="submit" name="submit" class="btn-login" value="登陆" />
								</p>
								<p>
									<a href="javascript:;">登陆遇到问题？</a>
								</p>
							</form>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			//切换登陆面板
			var tops = document.getElementsByClassName('top'),
				top_lis = tops[0].getElementsByTagName('li'),
				mids = document.getElementsByClassName('mid'),
				mid_lis = mids[0].getElementsByTagName('li');
			for(var i = 0, l = top_lis.length; i < l; i++) {
				! function(i) {
					top_lis[i].onclick = function() {
						for(var k = 0; k < l; k++) {
							top_lis[k].className = '';
							mid_lis[k].className = '';
						}
						top_lis[i].className = "active";
						mid_lis[i].className = 'active';
					}
				}(i);
			}
			document.getElementById("btn-login").addEventListener('click', function(e) {
				if(window.event) {
					//IE中阻止函数器默认动作的方式
					window.event.returnValue = false;
				} else {
					//阻止默认浏览器动作(W3C)
					e.preventDefault();
				}
				location.href='homePage/homePage.html'
			});
		</script>
	</body>

</html>